/**
 * @desc: 商品渠道搜索区域
 * @author: elvis
 */

import React, { useState, useEffect } from 'react';
import { Form, Button, Input, Select, Tooltip } from 'antd';
import { getCurrentUser } from '@/utils/authority';
import FuzzyQueryStore from '@/components/FuzzyQueryStore';
import { getChannelList, queryCofoTemplateByUuid, queryTakeGoodsPrintTemplate } from '../../service';
import { customTrimFunc } from '@/utils/utils.jsx';
import { isEmpty } from 'lodash';

const { Option } = Select;

//获取商品类型下拉
const getGoodsType = (role) => {
	if (role == 'erp' || role == 'zjf') {
		return [
			{ id: '3', name: '库存商品' },
			{ id: '1', name: '自发拿货商品' },
			{ id: '2', name: '代发拿货商品' },
			{ id: '4', name: '供应商直发商品' },
		];
	} else if (role == 'daifa') {
		//代发
		return [
			{ id: '3', name: '库存商品' },
			{ id: '2', name: '代发拿货商品' },
			{ id: '4', name: '供应商直发商品' },
		];
	} else {
		//自发商品 zifa
		return [{ id: '3', name: '库存商品' }];
	}
};

export default ({ roleType, handleSearch, handleReset, handleGoodsTypeChange }) => {

	const [form] = Form.useForm();

	//渠道列表
	const [channelList, setChannelList] = useState([]);

    //合格证列表
	const [certificateList, setCertificateList] = useState([]);

    //拿货模板列表
	const [templateList, setTemplateList] = useState([]);

	useEffect(() => {
		queryChannelList();
        getCofoTemplateByUuid();
        getTakeGoodsPrintTemplate();
	}, []);

	// 获取渠道下拉列表
	const queryChannelList = async () => {
		const { data, success } = await getChannelList({
			isDeleted: 1,
			type: 2,
		});
		if (success) {
			setChannelList(data);
		}
	};

    //查询用户合格证
	const getCofoTemplateByUuid = async () => {
		const { data, success } = await queryCofoTemplateByUuid();
		if (success) {
			setCertificateList(data);
		}
	};

    //查询拿货模板
	const getTakeGoodsPrintTemplate = async () => {
		const { data, success } = await queryTakeGoodsPrintTemplate();
		if (success) {
			setTemplateList(data);
		}
	};

	//点击查询按钮
	const onFinish = (val) => {
		handleSearch(customTrimFunc(val));
	};

	//点击重置
	const onReset = () => {
		form.resetFields();
		handleReset();
	};

	//商品类型下拉
	const optionType = getGoodsType(roleType).map(v => (
		<Option value={v.id} key={v.id} label={v.name}>
			{v.name}
		</Option>
	));


	//渠道下拉选项
	const optionChannel = channelList.map((item) => {
		return (
			<Option key={item.id} value={item.id}>
				<Tooltip
					title={
						item.channelName +
						(getCurrentUser().uuid == item.uuid ? '(自发)' : '(第三方)')
					}
				>
					{item.channelName}
					{getCurrentUser().uuid == item.uuid ? '(自发)' : '(第三方)'}
				</Tooltip>
			</Option>
		);
	});

  //合格证下拉选项
  const certificateListOptions = !isEmpty(certificateList) && certificateList.map((item) => 
    (
    <Option label={`${item.templateName}（${item.width}*${item.height}mm）`} key={item.id} value={item.id}>
        <Tooltip title={`${item.templateName}（${item.width}*${item.height}mm）`}>
        {item.templateName}（{item.width}*{item.height}mm）
        </Tooltip>
    </Option>
    )
    );
  
  //拿货模板下拉
    const templateListOptions = !isEmpty(templateList) && templateList.map((item) => 
        (
        <Option label={`${item.templateName}）`} key={item.id} value={item.id}>
            <Tooltip title={`${item.templateName}`}>
            {item.templateName}
            </Tooltip>
        </Option>
        )
    );

	return (
		<Form
			form={form}
			layout="horizontal"
			name="order-search"
			onFinish={onFinish}
			initialValues={{
				deliverType: '3',
			}}
			className="search-form-style"
		>
			<Form.Item label="商品类型" name="deliverType">
				<Select
					showSearch
					style={{ width: 140 }}
					optionFilterProp="label"
					onChange={handleGoodsTypeChange}
				>
					{optionType}
				</Select>
			</Form.Item>
		
			<Form.Item label="商品编码" name="skuId">
				<Input placeholder="请输入商品编码" style={{ width: 140 }} />
			</Form.Item>
			<Form.Item label="款式编码" name="spuId">
				<Input placeholder="款式编码" style={{ width: 140 }} />
			</Form.Item>
			<Form.Item label="商品" name="ecGoodsName">
				<Input placeholder="商品" style={{ width: 140 }} />
			</Form.Item>
			<Form.Item label="发货渠道" name="channelId">
				<Select style={{ width: 140 }} placeholder="发货渠道">
					{optionChannel}
				</Select>
			</Form.Item>
			<Form.Item label="匹配状态" name="matchType">
				<Select placeholder="匹配状态" style={{ width: 140 }}>
					<Option key={1} value={1}>
						未匹配
					</Option>
					<Option key={2} value={2}>
						已匹配
					</Option>
				</Select>
			</Form.Item>
			<Form.Item label="供应商" name="storeId">
				<FuzzyQueryStore width="134px" />
			</Form.Item>
            <Form.Item label="合格证名称" name="cofcTemplateId">
                <Select
                showSearch
                optionFilterProp="label"
                style={{ width: 140 }} placeholder="请选择合格证">
					{certificateListOptions}
				</Select>
			</Form.Item>
            <Form.Item label="有无合格证" name="whetherCofcTemplate">
				<Select placeholder='全部' allowClear={true}>
					<Option key={1} val={1}>有</Option>
					<Option key={0} val={0}>无</Option>
				</Select>
			</Form.Item>
            <Form.Item label="拿货模板名称" name="takeTemplateId">
                <Select 
                    showSearch
                    allowClear={true}
                    optionFilterProp="label"
                    style={{ width: 140 }} placeholder="请选择拿货模板">
					{templateListOptions}
				</Select>
			</Form.Item>
            <Form.Item label="有无拿货模板" name="whetherTakeTemplate">
				<Select placeholder='全部' allowClear={true}>
					<Option key={1} val={1}>有</Option>
					<Option key={0} val={0}>无</Option>
				</Select>
			</Form.Item>
			<Form.Item>
				<Button
					type="primary"
					htmlType="submit"
					style={{ marginRight: '16px' }}
				>
					查询
				</Button>
				<Button onClick={onReset}>重置</Button>
			</Form.Item>
		</Form>
	);
};
